<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0'>
     <meta http-equiv='X-UA-Compatible' content='ie=edge'>
     <title>Document</title>
     <script>
    //我们之前Js放在body结束的时候
    //我们这个代码必须要放这块，作用是在页面一加载的时候就要给html设置font-size 二次改变 16px
     //页面加载的时候就会执行如下的代码
        // window.onload = function () {
        //     //640代表的是你的设计稿是640px
        //     //100就是指明1rem = 100px 为什么是100，随便写的
        //     // 218 2.18rem
        //     getRem(640, 100)
        // };
        //尽早的执行
        getRem(640, 100)
        window.onresize = function () {
            getRem(640, 100)
        };
        //用来设置html的font-size
        function getRem(pwidth, prem) {
            //获取html元素
            var html = document.getElementsByTagName("html")[0];
            //获取视窗宽度
            //下面的代码是为了考虑兼容性
            //在IE7、IE8、Firefox中，document.body.clientWidth以及 document.body.clientHeightzhi值为0，此时，可以使用 document.documentElement.clientHeight等代替。
            var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
            html.style.fontSize = oWidth / pwidth * prem + "px";
        }
     </script>
     <link rel="stylesheet" href="./css/index.css">
  </head>
  <body>
      <div class="wrapper">
          <div class="title clearfix">
              <h3>全场优惠</h3>
              <p>0/1</p>
          </div>
          <div class="content">
              <span class="icon-add"></span>
              <span>添加优惠</span>
          </div>
      </div>
  </body>
</html>